<template>
  <div class="main-container">
     <div class="title">
      <h2>学生自我陈述</h2>
      <p>请客观评价自己的成长与发展，总结收获与不足本学期自我陈述</p>
    </div>
    <el-card class="statement-card" shadow="hover">
      <!-- 标题区域 -->
      <div class="header">
        <h2>本学期自我陈述</h2>
        <div class="last-edit">最后编辑：{{ lastEditTime }}
              <div :class="['button-group', isMobile ? 'button-group-mobile' : 'button-group-pc']">
      </div>
        </div>
      </div>

      <!-- 标题输入 -->
      <el-form-item label="陈述标题" label-position="top">
        <el-input v-model="form.title" placeholder="请输入陈述标题" clearable :size="isMobile ? 'small' : 'default'" />
      </el-form-item>

      <!-- 富文本编辑器 -->
      <el-form-item label="陈述内容" label-position="top">
        <div class="editor-wrapper">
          <!-- 工具栏 -->
          <Toolbar :editor="editor" :defaultConfig="toolbarConfig"
            :class="isMobile ? 'toolbar-mobile' : 'toolbar-pc'" />
          <!-- 编辑区域 - 使用组件方式 -->
          <Editor v-model="form.content" :defaultConfig="editorConfig" :class="isMobile ? 'editor-mobile' : 'editor-pc'"
            @onCreated="handleEditorCreated" @onDestroyed="handleEditorDestroyed" />
        </div>
      </el-form-item>

      <!-- 操作按钮 -->
      <div :class="['button-group', isMobile ? 'button-group-mobile' : 'button-group-pc']">

          <el-button type="primary" @click="handleSaveDraft" :size="isMobile ? 'small' : 'default'">保存草稿</el-button>
        <el-button type="warning" @click="handleSaveAndSubmit" :size="isMobile ? 'small' : 'default'">保存并提交</el-button>
      </div>
    </el-card>
    <!-- <table-module :tableQuery="tableQuery" /> -->
  </div>

</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
// 正确导入 WangEditor 组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入编辑器样式
// 导入所有使用的组件
import { ElCard, ElFormItem, ElInput, ElButton, ElMessageBox, ElMessage } from 'element-plus'
import tableModule from '@/components/table-module.vue'
import { useStore } from "@/store"; // 引入store
const store = useStore(); // 获取store实例
const homeStore = store.home; // 获取homeStore实例





// 初始化数据
const form = ref({
  title: '2023年春季学期自我陈述',
  content: `尊敬的老师：

在本学期的学习生活中，我在各个方面都取得了一定的进步，现将我的表现总结如下：

在思想品德方面，我尊敬师长，团结同学，乐于助人...（此处省略内容，可自行补充）`
})
const lastEditTime = ref('2023-05-12 14:30') // 模拟最后编辑时间
let editor = ref(null) // 编辑器实例
const selfStatementData = [
  {
    title: '2023年春季学期自我陈述',
    type: '自我陈述',
    date: '2023-04-12',
    status: '已审核'
  },
  {
    title: '2022年秋季学期自我陈述',
    type: '自我陈述',
    date: '2023-11-12',
    status: '待审核'
  },
  {
    title: '2021年夏季学期自我陈述',
    type: '自我陈述',
    date: '2023-08-12',
    status: '未通过'
  }
]

// 表格数据参数
const tableQuery = {
  page: 1,
  size: 5,
  total: 0,
  small: true,
  title:'历史陈述记录',
  list: selfStatementData,
  columns: [
    {
      prop: 'title',
      label: '标题',
      width: '180'
    },
    {
      prop: 'date',
      label: '提交时间',
      width: '120'
    },
    {
      prop: 'status',
      label: '状态',
      width: '100'
    }
  ]
}


// 根据设备类型动态调整工具栏配置
const toolbarConfig = computed(() => {
  if (isMobile.value) {
    return {
      excludeKeys: [
        'fullScreen', 'insertVideo', 'code', 'splitLine', 'sub', 'sup',
        'clearStyle', 'fontSize', 'fontFamily', 'lineHeight'
      ]
    }
  } else {
    return {
      excludeKeys: ['fullScreen', 'insertVideo']
    }
  }
})

// 编辑器配置
const editorConfig = {
  placeholder: '请输入陈述内容...'
}

// 处理编辑器创建
const handleEditorCreated = (editorInstance) => {
  editor.value = editorInstance // 保存编辑器实例
}

// 处理编辑器销毁
const handleEditorDestroyed = () => {
  editor.value = null // 清空编辑器实例
}


// 检测是否为移动设备
const isMobile = computed(() => {
  return window.innerWidth < 768
})

// 添加窗口大小变化监听
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// 处理窗口大小变化
const handleResize = () => {
  // 当窗口大小变化时，重新设置编辑器内容以适应新尺寸
  if (editor.value) {
    const currentHtml = editor.value.getHtml()
    editor.value.setHtml(currentHtml)
  }
}

// 销毁事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 按钮事件
const handleSaveDraft = () => {
  ElMessageBox.prompt('请输入草稿备注', '保存草稿')
    .then(({ value }) => {
      sessionStorage.setItem('selfStatement', JSON.stringify(form.value))
      ElMessage.success(`已保存草稿：${value}`)
    })
    .catch(() => {
      ElMessage.info('已取消保存')
    })
}


const handleSaveAndSubmit = () => {
  // 保存并提交逻辑
  ElMessageBox.confirm('确认保存并提交？提交后不可修改', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用保存 + 提交接口
    homeStore.saveSelfStatement({
        STUDENT_ID: JSON.parse(sessionStorage.getItem('token')).student_id,
        STATEMENT: form.value.content,
    })
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}
</script>

<style scoped lang="scss">
.main-container {
   max-width: 1450px;
  margin: 0px auto;
  padding: 10px;
   .title {
    max-width: 1420px;
    margin: 0 auto;
    h2 {
      font-size: 24px;
      font-weight: 800;
      margin: 10px 0;
    }
  }
  h2{
    margin: 20px 0;
  }
}
 .statement-card {
  max-width: 1450px;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.last-edit {
  color: #999;
  font-size: 14px;
}

/* 编辑器包装器 */
.editor-wrapper {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}

/* 编辑器样式 */
.editor-pc {
  min-height: 400px;
  width: 100%;
}

.editor-mobile {
  min-height: 250px;
  width: 100%;
}

/* 工具栏样式 */
.toolbar-pc {
  border-bottom: 1px solid #dcdcdc;
  padding: 5px 10px;
}

.toolbar-mobile {
  border-bottom: 1px solid #dcdcdc;
  padding: 5px;
  overflow-x: auto;
  white-space: nowrap;
}

/* 按钮组样式 */
.button-group {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.button-group-pc {
  justify-content: flex-end;
}

.button-group-mobile {
  flex-wrap: wrap;
  justify-content: center;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .statement-card {
    padding: 15px;
    margin: 10px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  h2 {
    font-size: 18px;
    margin: 0;
  }

  .last-edit {
    font-size: 12px;
  }

  .el-form-item__label {
    font-size: 14px;
  }
}
</style>